<template>
  <div style="min-height:500px;" ref="ruleForm">
    <a-button type="primary" style="margin:40px 0 20px 0;" @click="clickPush">新增</a-button>
    <a-table
      ref="table"
      rowKey="key"
      :columns="columns"
      :dataSource="pageData"
      :pagination="false"
    />
    <j-modal
      :title="title"
      :width="600"
      :visible="visible"
      switchFullscreen
      @ok="handleOk"
      @cancel="handleCancel"
      cancelText="关闭">
      <a-form-model layout="horizontal" ref="subForm" :model="model" :rules="validatorRules" v-bind="formItemLayout">
        <z-form-item :datas="fieldArrModal" :form="model" :rules="validatorRules" :gutter="0" />
      </a-form-model>
    </j-modal>
  </div>
</template>

<script>
var phoneValidator = (rule, value, callback) => {
  if (!value || new RegExp(/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/).test(value)) {
    callback()
  } else {
    callback('请输入正确的联系电话')
  }
}
export default {
  props: ['current', 'controlPersonType', 'value'],
  data() {
    return {
      title: '新增家庭情况',
      model: {},
      modelType: 'add',
      visible: false,
      formItemLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 16 }
      },
      dictOptions1: [
        { text:"夫妻", value:"1" },{ text:"父子", value:"2" },{ text:"父女", value:"3" },
        { text:"母子", value:"4" },{ text:"母女", value:"5" },{ text:"儿子", value:"6" },
        { text:"女儿", value:"7" },{ text:"兄弟", value:"8" },{ text:"兄妹", value:"9" },
        { text:"姐弟", value:"10" },{ text:"姐妹", value:"11" },{ text:"其他", value:"12" },
      ],
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 70,
          align: 'center',
          customRender: (text, record, index) => `${index + 1}`
        },
        {
          title: '家属关系',
          dataIndex: 'socialRelation',
          width: 80,
          align: 'center',
          customRender: text => {
            return this.$options.filters.filterArray(text, this.dictOptions1, 'value', 'text')
          }
        },
        {
          title: '姓名',
          dataIndex: 'name',
          width: 80,
          align: 'center',
          customRender: text => {
            return <j-ellipsis value={text} length={14} />
          }
        },
        {
          title: '联系电话',
          dataIndex: 'phone',
          width: 100,
          align: 'center'
        },
        {
          title: '居住地',
          dataIndex: 'address',
          width: 110,
          align: 'left',
          customRender: text => {
            return <j-ellipsis value={text} length={14} />
          }
        },
        {
          title: '工作单位',
          dataIndex: 'workUnit',
          width: 100,
          align: 'center',
          customRender: text => {
            return <j-ellipsis value={text} length={10} />
          }
        },
        {
          title: '操作',
          width: 120,
          align: 'center',
          dataIndex: 'action',
          customRender: (text, record, index) => {
            return (
              <a-space size={6}>
                <a-button type="link" style={'padding:0'} onClick={event => this.clickPush(record)}>编辑</a-button>
                <a-button type="link" style={'padding:0'} onClick={event => this.onDelete(record.key)}> 删除 </a-button>
              </a-space>
            )
          }
        }
      ],
      fieldArrModal: [
        { 
          label: '家属关系',
          prop: 'socialRelation',
          tagType: 'dict-select', 
          dictOptions: [
            { text:"夫妻", value:"1" },{ text:"父子", value:"2" },{ text:"父女", value:"3" },
            { text:"母子", value:"4" },{ text:"母女", value:"5" },{ text:"儿子", value:"6" },
            { text:"女儿", value:"7" },{ text:"兄弟", value:"8" },{ text:"兄妹", value:"9" },
            { text:"姐弟", value:"10" },{ text:"姐妹", value:"11" },{ text:"其他", value:"12" },
          ]
        },
        { label: '姓名', prop: 'name', tagType: 'input' },
        { label: '联系电话', prop: 'phone', tagType: 'input' },
        { label: '居住地', prop: 'address', tagType: 'input' },
        { label: '工作单位', prop: 'workUnit', tagType: 'input' },
      ],
      validatorRules: {
        socialRelation:[ { required: true, message: '请选择家属关系!' }],
        name:[ { required: true, message: '请输入!' }],
        phone:[ 
          { required: true, message: '请输入!' },
          { validator: phoneValidator }
        ],
        address:[ { required: true, message: '请输入!' },],
        workUnit:[ { required: true, message: '请输入!' },],
      },
      pageData: []
    }
  },
  computed: {
    getValue() {
      let value = this.value ? this.value : []
      return value
    }
  },
  watch: {
    getValue: {
      immediate: true,
      deep: true,
      handler(val) {
        console.log(val)
        this.pageData = [...this.pageData, ...val]
      }
    },
    // pageData:{
    //     immediate: true,
    //     deep: true,
    //     handler(val) {
    //       this.$emit('change', this.current, val)
    //     }
    //   }
  },
  methods: {
    clickPush(record) {
      this.visible=true
      this.modelType = record && Object.keys(record).length>0 && record.key? 'edit':'add'
      this.model = this.modelType==='edit'? Object.assign({}, record):{}
      this.title = this.modelType==='edit'? '编辑家庭情况':'新增家庭情况'
    },
    handleOk() {
      let parameter = Object.assign({}, (this.modelType==='edit'? {}: {key: 'add_' + Date.parse(new Date()).toString()}), this.model)
      this.$refs.subForm.validate((valid)=> {
        if (valid) {
          if (this.modelType==='edit') {
            let index = this.pageData.findIndex(item=> item.key === parameter.key)
            this.pageData.splice(index, 1, parameter)
          } else {
            this.pageData.push(parameter)
          }
          this.handleCancel()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    onDelete(key) {
      let that = this
      this.$confirm({
        title: `确定删除该条记录?`,
        onOk() {
          const dataSource = [...that.pageData];
          that.pageData = dataSource.filter((item) => item.key !== key)
        },
        onCancel() {
          console.log('Cancel')
        }
      })
    },
    handleCancel() {
      this.visible=false
      this.model = {}
    }
  }
}
</script>

<style scoped lang="less">
</style>
